const r = `
<template>\r
  <s-form label-width="6em" colon="：">\r
    <s-form-item label="徽标形状">\r
      <s-radio-group v-model="options.shape" :options="shapeList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="是否限值">\r
      <s-radio-group v-model="options.max" :options="isOrNotList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="是否描边">\r
      <s-radio-group v-model="options.bordered" :options="isOrNotList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="是否阴影">\r
      <s-radio-group v-model="options.shadow" :options="isOrNotList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="是否禁用">\r
      <s-radio-group v-model="options.disabled" :options="isOrNotList"></s-radio-group>\r
    </s-form-item>\r
    <s-form-item label="徽标示例">\r
      <s-flex gap="2em" wrap="wrap">\r
        <s-badge\r
          variant="dot"\r
          :shape="options.shape"\r
          :value="120"\r
          :max="options.max ? 99 : undefined"\r
          :bordered="options.bordered"\r
          :shadow="options.shadow"\r
          :disabled="options.disabled"\r
          >点状徽标</s-badge\r
        >\r
        <s-badge\r
          variant="number"\r
          :shape="options.shape"\r
          :value="120"\r
          :max="options.max ? 99 : undefined"\r
          :bordered="options.bordered"\r
          :shadow="options.shadow"\r
          :disabled="options.disabled"\r
          >数字徽标</s-badge\r
        >\r
      </s-flex>\r
    </s-form-item>\r
  </s-form>\r
</template>\r
\r
<script lang="ts">\r
import { BADGE_SHAPE_DEFAULT, BADGE_SHAPE_LABEL, BADGE_SHAPE_OPTIONS } from "@smartcity/simple-ui";\r
import UserAvatarUrl from "documents/assets/user-avatar.svg";\r
import { Component, Vue } from "vue-property-decorator";\r
\r
@Component\r
export default class ButtonDemo extends Vue {\r
  /**\r
   * @description: 徽标地址\r
   * @private\r
   * @readonly\r
   * @type {string}\r
   */\r
  readonly url = UserAvatarUrl;\r
\r
  /**\r
   * @description: 形状可选项列表\r
   * @private\r
   * @readonly\r
   * @type {Array<Object>}\r
   */\r
  readonly shapeList = BADGE_SHAPE_OPTIONS.map((shape) => ({\r
    value: shape,\r
    label: BADGE_SHAPE_LABEL.get(shape),\r
  }));\r
\r
  /**\r
   * @description: 是否列表\r
   * @private\r
   * @readonly\r
   * @type {Array<Object>}\r
   */\r
  readonly isOrNotList = [\r
    { value: true, label: "是" },\r
    { value: false, label: "否" },\r
  ];\r
\r
  /**\r
   * @description: 组件配置项\r
   * @private\r
   * @type {Object}\r
   */\r
  options = {\r
    shape: BADGE_SHAPE_DEFAULT, // 徽标形状\r
    max: false, // 最大值\r
    bordered: false, // 是否描边\r
    shadow: false, // 是否有阴影\r
    disabled: false, // 是否禁用\r
  };\r
}\r
<\/script>\r
\r
<style lang="scss" scoped></style>\r
`; export { r as default };
